<template>
	<view>
		<view class="date-cmpt">
			<view class="month">{{month || '2024年'}}</view>
			<scroll-view :scroll-x="true" class="date-select" :scroll-into-view="toView" :enable-flex="true">
				<view class="item" v-for="(item, index) in range" :key="index" :id="'day-' + item.day"
					:class="{'cur': item.day === selected}">
					<view class="week">{{item.week}}</view>
					<view class="date">{{item.show}}</view>
				</view>
			</scroll-view>

			<view class="enroll-title">{{enroll.name}}</view>

			<view class="time-table">
				<view class="table-inner">
					<view class="list">
						<view class="item" @click="handleSelectTimeTap(item)" v-for="(item, index) in times"
							:key="index">
							<view class="left" :class="{'top': item.title}">{{item.title}}</view>
							<view class="right text-cut" :class="{
					'selected': item.selected,
					'selected-first': item.start === selectedStart,
					'expire': item.expire,
					'used': item.used,
					'used-first': item.usedFirst
				}">
								{{item.usedText || ''}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view style="height: 150rpx;"></view>

			<view @click="bindSumbitTap" v-if="selectedStart && selectedEnd && selectedEndPoint"
				class="time-submit safe-bottom">
				<view class="inner bg-project">确认预约 ({{selectedStart}}~{{selectedEndPoint}})</view>
			</view>
		</view>
	</view>
</template>

<script>
	import timeHelper from './utils/time_helper.js'
	import dataHelper from './utils/data_helper.js'

	export default {
		data() {
			return {
				enroll: {},

				// 日期
				range: [],
				month: '',
				start: "",
				end: '',
				selected: '',
				toView: '',

				// 时间
				times: [], //时间段 48个
				selectedStart: '',
				selectedEnd: '',
				selectedEndPoint: '',
				day: '',
				startTimeStep: 0, // 开始时间，把每天划分为48个时间段
				endTimeStep: 47, // 结束时间，把每天划分为48个时间段
				used: [{
						title: "王城隆/需求讨论评审会",
						start: "07:00",
						end: "09:00",
						url: "",
					},
					{
						title: "欧阳辉/研发部会议",
						start: "10:30",
						end: "12:00",
						url: "",
					},
					{
						title: "刘俊山/APP设计评审会",
						start: "14:30",
						end: "15:00",
						url: "",
					}
				], // 已选择 {title,start,end,url=支持true或者跳转地址}
				usedPos: 'first', // 已约的标题位置 first / mid
			}
		},
		onLoad(option) {
			this.enroll = JSON.parse(option.enroll)
			/* this.enroll = {
				name: '第一会议室',
				person: 10,
				tools: ['白板', '音箱']
			} */
		},
		mounted() {

			if (!this.selected) {
				this.selected = timeHelper.time('Y-M-D');
			} else {
				this.toView = 'day-' + this.selected
			}
			this.month = timeHelper.timestamp2Time(timeHelper.time2Timestamp(this.selected), 'Y年M月');

			this.initRange();
			this.initTimes();
		},
		methods: {
			initRange() {
				let start = this.start;
				let end = this.end;
				if (!start) start = timeHelper.time('Y-M-D');
				if (!end) end = timeHelper.time('Y-M-D', 86400 * 15);

				let range = [];
				let startTime = timeHelper.time2Timestamp(start);
				let endTime = timeHelper.time2Timestamp(end);

				for (let k = startTime; k <= endTime;) {
					let day = timeHelper.timestamp2Time(k, 'Y-M-D');
					let month = timeHelper.timestamp2Time(k, 'Y年M月');

					let node = {
						day,
						show: this._fmtShow(day),
						week: this._fmtWeek(day),
						month
					}
					range.push(node)
					k += 86400 * 1000
				}
				this.range = range
			},

			initTimes() {
				let now = timeHelper.time('Y-M-D h:m');

				let times = this.times;

				if (!this.day) {
					this.day = timeHelper.time('Y-M-D')
				}

				// 初始化
				if (times == 0) {
					for (let k = this.startTimeStep; k <= this.endTimeStep; k++) {
						let start = '';
						let end = '';
						let title = '';

						let clock = Math.trunc(k / 2);
						if (k % 2 == 0) {
							start = dataHelper.padLeft(clock, 2, '0') + ':00';
							end = dataHelper.padLeft(clock, 2, '0') + ':30';
							title = start;
						} else {
							start = dataHelper.padLeft(clock, 2, '0') + ':30';
							end = dataHelper.padLeft(clock + 1, 2, '0') + ':00';
							title = '';
						}
						if (end == '24:00') end = '23:59';

						let node = {
							idx: k,
							title,
							start,
							end,
							used: false,
							selected: false,
							expire: (this.day + ' ' + start < now), //过期时间 
						}
						times.push(node);
					}
				}

				// 已约时间段
				for (let k = 0; k < this.used.length; k++) {
					let usedNode = this.used[k];

					// 计算有占有几个时间段
					let usedlen = 0;
					for (let j = 0; j < times.length; j++) {
						let node = times[j];
						if (node.start >= usedNode.start && node.start <= usedNode.end) {
							usedlen++;
						}
					}
					if (usedlen <= 1) usedlen = 2;
					usedlen = Math.round(usedlen / 2);

					if (this.usedPos == 'first') usedlen = 1;

					let curLen = 0;
					for (let j = 0; j < times.length; j++) {
						let node = times[j];
						if (node.start == usedNode.start) {
							node.used = usedNode.url || 'no';
							node.usedFirst = true;

							curLen++;
							if (curLen == usedlen) node.usedText = usedNode.title;
						} else if (node.start >= usedNode.start && node.start <= usedNode.end) {
							node.used = usedNode.url || 'no';
							node.usedFirst = false;

							curLen++;
							if (curLen == usedlen) node.usedText = usedNode.title;
						}
					}
				}

				this.times = times
				console.log(this.times);
			},

			// 选择时间
			handleSelectTimeTap(item) {
				let timeNode = item;

				let selected = timeNode.start;

				// 已选择
				let used = timeNode.used;
				if (used) {
					if (used === true)
						return;
					else {
						return uni.navigateTo({
							url: used,
						});
					}
				}

				// 过期
				let expire = timeNode.expire;
				if (expire) return;


				let selectedStart = this.selectedStart;
				let selectedEnd = this.selectedEnd;


				let times = this.times;

				// 区间内直接干掉
				if (selected >= selectedStart && selected <= selectedEnd) {
					selectedStart = '';
					selectedEnd = '';
					for (let k = 0; k < times.length; k++) {
						times[k].selected = false;
					}

					this.times = times
					this.selectedStart = selectedStart
					this.selectedEnd = selectedEnd
					return;
				}

				if (!selectedStart && !selectedEnd) {
					selectedStart = selected;
					selectedEnd = selected;
				}

				if (selected < selectedStart) selectedStart = selected;
				if (selected > selectedEnd) selectedEnd = selected;

				// 选中 
				for (let k = 0; k < times.length; k++) {
					if (times[k].start >= selectedStart && times[k].start <= selectedEnd) {
						times[k].selected = true;
					}
				}

				// 取得结束时间点
				let selectedEndPoint = '';
				for (let k = 0; k < times.length; k++) {
					if (times[k].start == selectedEnd) {
						selectedEndPoint = times[k].end;
					}
				}

				this.times = times
				this.selectedStart = selectedStart
				this.selectedEnd = selectedEnd
				this.selectedEndPoint = selectedEndPoint
			},

			// 确认预约
			bindSumbitTap(e) {
				let start = this.selectedStart;
				let end = this.selectedEnd;
				let endPoint = this.selectedEndPoint;
				if (!start || !end || !endPoint) return;

				const data = {
					enroll: this.enroll,
					month: this.month,
					selectedStart: this.selectedStart,
					selectedEndPoint: this.selectedEndPoint
				}
				uni.navigateTo({
					url: '/sub-meeting/enroll_join?params=' + JSON.stringify(data)
				})
			},

			_fmtShow(day) {
				return day.split('-')[2];
			},

			_fmtWeek(day) {
				if (day == timeHelper.time('Y-M-D')) return '今天';
				day = timeHelper.week(day);
				day = day.replace('周', '');
				return day;
			},

			itemTimeClass(item) {
				return {
					'selected': item.selected,
					'selected-first': item.start === selectedStart,
					'expire': item.expire,
					'used': item.used,
					'used-first': item.usedFirst
				};
			}
		}
	}
</script>

<style scoped lang="scss">
	.date-cmpt {
		width: 100%;
		position: relative;

		.month {
			width: 100%;
			padding: 10rpx 15rpx;
			font-size: 32rpx;
			color: #000;
			font-weight: bold;
			font-family: 'din';
		}

		.date-select {
			white-space: nowrap;

			.item {
				margin: 10rpx 10rpx 10rpx 0rpx;
				text-align: center;
				font-size: 24rpx;
				line-height: 55rpx;
				height: 110rpx;
				width: 85rpx;
				border: 1rpx solid #ddd;
				border-radius: 17rpx;
				display: inline-block;

				&:first-child {
					margin-left: 5rpx;
				}

				.date {
					font-size: 32rpx;
					color: #000;
					font-family: 'din';
				}

				.week {
					font-size: 24rpx;
					color: #666;
				}
			}

			.cur {
				background-color: #f37445;

				.week,
				.date {
					color: #fff;
				}
			}
		}

		.enroll-title {
			width: 100%;
			background-color: #fff;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			padding: 0 14rpx;
			height: 60rpx;
			line-height: 60rpx;
			margin-bottom: 20rpx;
		}

		.time-table {
			width: 100%;
			padding: 0 5rpx;

			.table-inner {
				width: 100%;
				font-size: 28rpx;
			}

			.list {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;

				.item {
					color: #000;
					width: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					height: 42rpx;
					padding: 0;

					&:last-child {
						.left {
							border-bottom: 1rpx solid #ddd;
						}

						.right {
							border-bottom: 1rpx solid #ddd !important;
						}
					}

					&:first-child {
						.right {
							border-top: 1rpx solid #ddd !important;
						}
					}

					.left {
						background-color: #f5fafe;
						height: inherit;
						width: 140rpx;
						text-align: center;
						padding-top: 4rpx;
						border-right: 1rpx solid #ddd;
						border-left: 1rpx solid #ddd;
						font-size: 30rpx;
						font-weight: normal !important;
						font-family: 'din';
					}

					.top {
						border-top: 1rpx solid #ddd !important;
						border-bottom: 0 !important;
					}

					.right {
						flex: 1;
						height: inherit;
						border-right: 1rpx solid #ddd;
						border-top: 1rpx solid #ddd;
						background-color: #fff;
						color: #444;
						padding: 0 10rpx;
						width: 100%;
						text-align: center;
					}

					.selected {
						border-top: 1rpx solid #dfffd8;
						background-color: #dfffd8;
					}

					.selected-first {
						border-top: 1rpx solid #ddd !important;
					}

					.expire {
						background-color: #f5f5f5;
						color: #999;
					}

					.used,
					.used-first {
						border-top: 0rpx solid #E0EBFE;
						background-color: #E0EBFE;
						color: #f37445;
						font-size: 28rpx;
						border-left: 6rpx solid #1A65FF;
						text-align: left;
					}

					.used-first {
						border-top: 1rpx solid #ddd !important;
					}
				}
			}
		}

		.time-submit {
			width: 100%;
			position: fixed;
			bottom: 15rpx;
			padding: 20rpx 30rpx;
			z-index: 999999;
			box-sizing: border-box;

			.inner {
				width: 100%;
				background-color: #999;
				font-size: 36rpx;
				border-radius: 15rpx;
				padding: 15rpx 0;
				text-align: center;
				color: #fff;
			}

			.bg-project {
				background-color: #2870E5 !important;
			}
		}
	}
</style>